<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- <link rel="stylesheet" href="css/bootstrap.min.css"/> -->
    <link rel="stylesheet" href="/static/css/login.css">


    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/utile.js"></script>

    <style>
        .rg_layout {
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin: auto;
        }

        .rg_left {
            float: left;
            margin: 15px;
        }
        .rg_center {
            float: left;
        }
        .rg_right {
            float: right;
            margin: 15px;
        }

        .rg_left > p:first-child {
            color:#FFD026;
            font-size: 20px;
        }

        .rg_left > p:last-child {
            color:#A6A6A6;
            font-size: 20px;
        }

        .rg_right > p:first-child {
            font-size: 15px;

        }
        .rg_right p a {
            color:pink;
        }

        .td_left {
            width: 100px;
            height: 45px;
            text-align: right;
        }
        .td_right {
            padding-left: 50px ;
        }

        #username, #password, #email, #name, #tel, #birthday, #checkcode {
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }

        #checkcode {
            width: 110px;
        }

        #img_check {
            height: 32px;
            vertical-align: middle;
        }

        #btn_sub {
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
        }

        .error {
            color:red;
        }
        #td_sub {
            padding-left: 150px;
        }

        .container{
            width: 700px;
        }

        .forget{
            color: coral;
        }
    </style>

    <title>注册</title>
</head>

<body>
<section>
    <!-- 背景颜色 -->
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
        <!-- 背景圆 -->
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <!-- 登录框 -->
        <div class="container">
            <div class="form" id="login">
                <h2>注册</h2>
                <div class="rg_center">
                    <div class="rg_form">
                        <form action="/shop/insert" id="form" method="get">
                            <table>
                                <tr>
                                    <td class="td_left"><label for="username">用户名</label></td>
                                    <td class="td_right">
                                        <input type="text" name="username" id="username" placeholder="请输入用户名" onblur="existUser()">
                                        <span id="s_username" class="error"></span>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="td_left"><label for="password">密码</label></td>
                                    <td class="td_right">
                                        <input type="password" name="password" id="password" placeholder="请输入密码">
                                        <span id="s_password" class="error"></span>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="td_left"><label for="email">Email</label></td>
                                    <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                                </tr>

                                <tr>
                                    <td class="td_left"><label for="name">姓名</label></td>
                                    <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                                </tr>

                                <tr>
                                    <td class="td_left"><label for="tel">手机号</label></td>
                                    <td class="td_right"><input type="text" name="phone" id="tel" placeholder="请输入手机号"></td>
                                </tr>

                                <tr>
                                    <td class="td_left"><label>性别</label></td>
                                    <td class="td_right">
                                        <input type="radio" name="gender" value="0" checked> 男
                                        <input type="radio" name="gender" value="1"> 女
                                    </td>
                                </tr>

                                <tr>
                                    <td class="td_left"><label for="checkcode" >验证码</label></td>
                                    <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                        <input type="hidden" id="code1">
                                        <img id="img_check" src="">
                                    </td>
                                </tr>


                                <tr>
                                    <td colspan="2" id="td_sub"><input type="button" onclick="t()" id="btn_sub" value="注册"></td>
                                </tr>
                            </table>

                        </form>

                        <p class="forget">已有账户?<a href="/page/index.jsp">
                            登录
                        </a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    var exist = false;
    var cod1 = "";

    $(function(){
        /*这个可以防止浏览器后退时候图片不刷新*/
        $("#img_check").prop("src", "/IdentifyingCodeServlet?" + new Date().getTime());
        setTimeout(function (){
            $.get("/code", function(data){
                cod1 = data;
                $("#code1").val(data);

            });
        },500);


        let $form = $("form");

        // /*点击框自动清空内容*/
        // $form.on("click", ":input[type!=submit]", function () {
        // 	$(this).prop("value", "");
        // });

        /*点击生成新的验证码*/
        $("#img_check").click(function () {
            $(this).prop("src", "/IdentifyingCodeServlet?" + new Date().getTime());
            setTimeout(function (){
                $.get("/code", function(data){
                    cod1 = data;
                    $("#code1").val(data);

                });
            },500);
        });
    })

    function existUser() {
        $.ajax({
            url:"/shop/exist?username=" + $("#username").val().trim(),
            success:function (response) {
                if(response == "yes"){
                    $("#s_username").html("用户名已存在！");
                    exist = false;
                    return false;
                }else{
                    exist = true;
                    $("#s_username").html("");
                }
            },
            error:function (err) {
                $("#s_username").val("出现错误，稍后重试！");
            }
        })
    }


    //注册信息验证
    function t(){
        var username = $("#username").val();
        var password = $("#password").val();
        var email = $("#email").val();
        var name = $("#name").val();
        var phone = $("#tel").val();
        var sex = $("input[name = 'gender']:checked").val();
        var code = $("#checkcode").val();



        // console.log(code + "-" + cod1 + "-" + $("#code1").val());
        if(username == "" || password == "" || email == "" || name == "" || phone == ""){
            alert("请完善信息！！");
            return false;
        }


        if(code == null || code == "" || code != $("#code1").val()){
            alert("验证码错误！");
            $("#img_check").prop("src", "/IdentifyingCodeServlet?" + new Date().getTime());
            setTimeout(function (){
                $.get("/code", function(data){
                    cod1 = data;
                    $("#code1").val(data);

                });
            },500);

            return false;
        }

        if(exist == false){
            alert("用户名已存在！！");
            return false;
        }

        //信息正确，请求后台写入
        $.ajax({
            url:"/shop/insert",
            type:"POST",
            // contentType: 'application/json;charset=utf-8',//这个必须是这个格式
            data:{
                "username":username,
                "password":password,
                "email":email,
                "name":name,
                "phone":phone,
                "sex":sex
            },
            success:function(response){
                if(response == "ok"){
                    alert("注册成功！");
                    window.location.href="/page/login.jsp";
                }
            },
            error:function(err){
                console.log(err);
            }
        })
    }
</script>
</body>

</html>
